<template>
  <a-modal  :width='800'
  :title="modalbase.title"
  :visible="visible"
  @ok="handleOk"
  :confirmLoading="confirmLoading"
  @cancel="handleCancel"
  >
     <!-- 付款记录 -->
      <h3  class='fontWeight'  v-if='receiveType ==false'> 
        <span v-if='transactionType == 1' >当前您的角色为经销商1（{{baseInfo.latterCom}}）：</span>
        <span v-if='transactionType == 2' >当前您的角色为经销商2（{{baseInfo.latterCom}}）：</span>

        <span v-if='transactionType == 1' >垫付款给供应商</span>
        <span v-if='transactionType == 2' >垫付款给经销商1</span>（{{baseInfo.formerCom}}）
      </h3>
      <!-- 收款记录 -->
      <h3  class='fontWeight'  v-if='receiveType == true'> 
        <span  v-if='transactionType == 2'>当前您的角色为经销商（{{baseInfo.formerCom}}）：收到经销商（{{baseInfo.latterCom}}）打款</span>
        <span  v-if='transactionType == 3'>
          当前您的角色为经销商（{{baseInfo.formerCom}}）：收到买家公司（{{baseInfo.latterCom}}）打款
        </span>
      </h3>
      <!-- <a-row  v-if='creditData.LastQuota'>
          <span  class='color-red'>*</span>本合同买方授信余额为<span  class='color-red'> {{creditData.LastQuota}}{{creditData.CreditLineUnit | moneyUnit}}</span>，单笔最高授信额度为<span  class='color-red'>{{creditData.EachMaxQuota}}{{creditData.CreditLineUnit | moneyUnit}}</span>
      </a-row>
      <a-row v-else  class='color-red'>*本合同买方授信余额未录入</a-row> -->
      <a-table :columns="columns" :dataSource="data"  :pagination="pagination"    @change="handleTableChange">
          <span slot="createTime" slot-scope="text, record">
              {{text | formatDate}}
          </span>
          <span slot="amt" slot-scope="text, record">
              {{text}}（{{record.amtUnitA | moneyUnit}}）
          </span>
          <span slot="action" slot-scope="text, record"> 
            <!-- 收款操作  -->
            <span   v-if='receiveType==true  && transactionType==2'>
                <a-popconfirm title="确认收款？"   v-if='record.status==0'  @confirm="confirmReceive(record.code)"   okText="确认" cancelText="取消">
                    <a href="javascript:;"  class='color-red'>确认收款</a>
                </a-popconfirm>
                <span  v-else>已确认收款</span>
            </span>
            <span  v-else>——</span>
          </span>
          <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
            <a-row>
              <a-col  :span='12'> 
                付款方：{{baseInfo.latterCom}} <br>
                付款银行：{{record.payerBankName}} <br>
                账户名称：{{record.payerAccountName}} <br>
                付款账号：{{record.payerBankAccount}} <br>
                SWIFT：{{record.payerSwift}} <br>
                付款金额：{{record.amt}} {{record.amtUnitA | moneyUnit}}<br>
                汇率：{{record.exchangeRate}}
              </a-col>
              <a-col  :sapn='12'>
                收款方：{{baseInfo.formerCom}} <br>
                收款银行：{{record.payeeBankName}} <br>
                账户名称：{{record.payeeAccountName}} <br>
                收款账号：{{record.payeeBankAccount}} <br>
                SWIFT：{{record.payeeSwift }} <br>
                凭据：<a-button size='small'>查看</a-button> <br>
                备注：{{record.remark}} <br>
              </a-col>
            </a-row>
            <a-row  class='fr'>
              录入人： 张三 <br>
              录入时间：{{record.createTime | formatDate}}
            </a-row>
          </p>
      </a-table>

      <span  class='color-red'>*</span>线上仅显示收付款状态，不负责真实现金交易</span>
      <!-- 资金流详情 -->
      <!-- <PayDetail  ref='paySteam'  ></PayDetail> -->
  </a-modal>
</template>

<script>
  import  { submitPayment,getPayList,confirmRe,getEntCredit }  from  '@/api/order/index'
  import moment  from  'moment'

    import  fileUpload  from  '@/components/common/fileUpload'
const columns = [
  { 
    dataIndex: 'name',
    key: 'name',
    slots: { title: 'customTitle' },                                                          
    scopedSlots: { customRender: 'name' }, 
  },
  { 
    dataIndex: 'createTime',
    title:'时间',                                                       
    scopedSlots: { customRender: 'createTime' }, 
  },
  { 
    dataIndex: 'amt',
    title:'金额',                                                       
    scopedSlots: { customRender: 'amt' }, 
  },
  { 
    dataIndex: 'createUserName',
    title:'创建人',                                                       
    scopedSlots: { customRender: 'createUserName' }, 
  },
  {
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
      }
]
export default {
  name: 'orderPayList',
  props:{
      visible:{
        type:Boolean,
        default:false
      },
      // entCode:{
      //   type:String,
      //   default:''
      // }
  },
  data () {
    return {
      columns,
      confirmLoading: false,
      modalbase:{
        title:'收付款记录'
      },
      receiveType:false,//1 确认收款模式  2 收付记录模式 
      currentCode:'',//transactioncode 
      transactionType:'',/*当前交易关系*/
      creditData:{},//授信额度
      baseInfo:{
        formerCom:'',
        latterCom:''

      },/*当前所需基本信息*/
      formLayout:{
        labelCol:{
           span:5
        },
        wrapperCol:{
            span:16
        }
      },
      fileData:[],
      data:[],//交易记录表格 

      baseform:{
        orderCode:{initialValue:''},
        transactionCode:{initialValue:''},
        prjCode:{initialValue:''},

        payer:{initialValue:''},
        payerBankName:{rules:[{required:true}]},
        payerAccountName:{rules:[{required:true}]},
        payerBankAccount:{rules:[{required:true}]},
        amtUnitA:{rules:[{required:true}]},

        payee:{initialValue:''},
        payeeBankName:{rules:[{required:true}]},
        payeeAccountName:{rules:[{required:true}]},
        payeeBankAccount:{rules:[{required:true}]},
        credentialFile:{initialValue:''},
      },
      search:{
        pageSize:5,
        pageNo:1,
        transactionCode:''
      },
      pagination:{
        total:0,
        pageSize: 5,//每页中显示10条数据
        // showSizeChanger: true,

        // pageSizeOptions: ["10", "20"],//每页中显示的数据
        showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
      },                                                                                                
    
       
    }
  },
  methods:{
    pageInit(code){
      getPayList(this.search).then((res)=>{
        if(res.data.flag == true){
          this.data = res.data.dataList
          this.pagination.total = res.data.totalRs

        }
      })
    },
    //提交 信息
    handleOk(e) {
      let that = this , url 
      this.form.validateFields((err, values) => {
          if (!err) {
            console.log(values)
            // this.confirmLoading = true; 
            submitPayment(values).then((res)=>{
                if(res.data.flag == true){
                  this.$message.success(res.data.msg)
                  this.$emit('handleOk')
                }
            })
          }
          else{
            console.log(err)
          }
      });
    },
    handleCancel(e) {
      this.$emit('handleCancel') 
    }, 
    handleTableChange (pagination, filters, sorter) {
        // console.log(pagination);
        this.search.pageNo = pagination.current
        this.search.pageSize =pagination.pageSize
        this.pageInit()
    },
    
    confirmReceive(code){
        confirmRe(code).then((res)=>{
          this.$message.success(res.data.msg)
          this.pageInit(this.currentCode)
        })
      },
 
  },
  mounted(){
    this.$nextTick(()=>{
      this.$on('openDialog',function(data,index,buyent){  
        if(index == 1){
          this.receiveType=true
          this.modalbase.title = '收款记录'
        }
        if(index == 2){
          this.receiveType = false
          this.modalbase.title = '付款记录'
        }

        this.currentCode = data.code
        this.search.transactionCode = this.currentCode
        // console.log(data)
        /*收付款双方*/
        data.entList.forEach((item)=>{ 
          item.code == data.buyer ? this.baseInfo.formerCom = item.name :''
          item.code == data.seller ? this.baseInfo.latterCom = item.name :''
        })
        /*收付款双方交易关系 供-代理 代理-代理*/
        this.transactionType = data.transactionType
        

        /*对应的相关订单*/
        this.baseform.orderCode.initialValue = data.orderCode
        this.baseform.transactionCode.initialValue = data.code
        this.baseform.prjCode.initialValue = data.prjCode
        this.baseform.payer.initialValue = data.buyer
        this.baseform.payee.initialValue = data.seller

        this.pageInit(this.currentCode)

        /*清空表单输入和校验*/
        this.form.resetFields()
 
      })
      this.$on('editDialog',function(code){ 
         

      })
    })
  },
  computed: {
    // formItemLayout () {
    //   const { formLayout } = this;
    //   return formLayout === 'horizontal' ? {
    //     labelCol: {md:{span:5},lg:{ span: 7 }},  //label 标签布局
    //     wrapperCol: {xxl:{ span: 8 },xl:{ span : 11},lg:{ span :14 },md:{ span : 16 },xs:{ span :24}}, //需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
    //   } : {};
    // },
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
    // this.form.getFieldDecorator('keys', { initialValue: [0], preserve: true });
  },
  components:{
    fileUpload
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>
